<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>工资</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<script type="text/javascript" src="js/mui.min.js"></script>
		 <script src="lib/echarts.custom.min.js"></script>
		<style type="text/css">
			header{
				background: #1d8fe1!important;
				box-shadow: none!important;
			}
			header a{
				color: white;
			}
			.link-icon{
				color: white;
			}
			 .field-contain label{
		        width: auto;
		        padding-right: 0;
		    }
		
		    .field-contain input[type='text']{
		        width: 40px;
		        height: 30px;
		        padding: 5px 0;
		        float: none;
		        text-align: center;
		    }
		    .mui-content{
		    	margin-top: 20px;
		    }
		    .mui-segmented-control{
		    	background: gainsboro;
		    }
		    .mui-slider-group{
		    	margin-top: 30px;
		    }
		   	.top1{
		   		padding: 10px 0;
		   		margin-bottom: 20px;
		   	}
		  	
		  	#item2{
		  		width: 100%;
		  	}
		  	.chart {
		  		width: 100%;
				height: 200px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui_gongzi">
				 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		   		<h1 class="mui-title"style="color: white;">工资</h1>
			</div>
	    </header>
	    <div class="mui-content">
	    	 <div class="mui-slider">
	    	 	 <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			         <a class="mui-control-item" href="#item1">加班统计</a>
			         <a class="mui-control-item" href="#item2">记月工资</a>
			         <a class="mui-control-item" href="#item3">其他统计</a>   
		     	</div>
		     	<div class="mui-slider-group">
		     		 <div id="item1" class="mui-slider-item mui-control-content mui-active">
			     		 	<div class="mui-input-row mui-input-range field-contain top1">
					            <div style="float:left">
					                <label >工作日加班小时：</label>
					                <input type="text" id='field-range-input' value='60'>
					            </div>
					            <div style="margin-left:121px;">
					                <input type="range" id='field-range' value="60" min="0" max="100" />
					            </div>
			        		</div> 
			        		<h5>周末加班小时：<span id='inline-range-val'>20</span></h5> 
					        <div class="mui-input-row mui-input-range ">
					            <label>小时</label>
					            <input type="range" id='inline-range' value="20" min="0" max="100" >
					        </div>
					        <br><br><br>
							<h5 style="clear: left;">节假日加班小时<span id='block-range-val'>50</span></h5>   
					        <div class="mui-input-row mui-input-range">
					            <input type="range" id='block-range' value="50" min="0" max="100" >
					        </div>
		     		 </div>
		     		  <div id="item2" class="mui-slider-item mui-control-content" style="text-align: l;">
		     		  		<div class="chart" id="pieChart"></div>
		     		  </div>
		     		  <div id="item3" class="mui-slider-item mui-control-content">
		     		  		 <div id="main" style="width: 440px;height:400px;"></div>
		     		  </div>
		     	</div>
	    	 </div>
	    </div>
	</body>
	<script type="text/javascript" src="libs/echarts-all.js"></script>
	<script>
		mui.init({
				swipeBack:true //启用右滑关闭功能
			});
	    //监听input事件，获取range的value值，也可以直接element.value获取该range的值
	    var rangeList = document.querySelectorAll('input[type="range"]');
	    for(var i=0,len=rangeList.length;i<len;i++){
	        rangeList[i].addEventListener('input',function(){
	            if(this.id.indexOf('field')>=0){
	                document.getElementById(this.id+'-input').value = this.value;
	            }else{
	                document.getElementById(this.id+'-val').innerHTML = this.value;
	            }
	            
	
	        });
	    }
	
	    document.getElementById('field-range-input').addEventListener('input',function(){
	        document.getElementById('field-range').value = this.value;
	    });
	    
	    
	    
	    echarts.init(document.getElementById('pieChart')).setOption({
            series: [{
						name: '访问来源',
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						data: [{
							value: 335,
							name: '工作日加班'
						}, {
							value: 310,
							name: '周末加班'
						}, {
							value: 234,
							name: '节假日加班'
						}, {
							value: 135,
							name: '奖金'
						}, {
							value: 1548,
							name: '薪资'
						}]
					}]
        });
        
        
        
         var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '休假'
            },
            tooltip: {},
            xAxis: {
                data: ["带薪休假","休假","调休","事假","病假","其他假"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [20, 20, 36, 10, 20, 10]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
        
        
        mui(".mui_gongzi").on('tap',"#mui_gongzi",function(){
				mui.openWindow({
					url:"yingyong.html",
					id:"yingyong.html"
				})
			})
	</script>
</html>
